<template>
	<view class="container">
		<view class="evaluate" v-if="evaluateList.length">
			<view class="evaluate_item" v-for="item in evaluateList" :key="item.id">
				<view class="user">
					<view>
						<image :src="item.ifAnonymous?item.userAvatar:url+'icon-15.png'" mode=""></image>
						<text class="name xjs-line-one">{{ item.ifAnonymous?item.nickName:'匿名用户' }}</text>
					</view>
					<text>{{ item.createTimeStr }}</text>
				</view>
				<view class="item_content">{{ item.content }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import api from '@/api'
import { onLoad,onReachBottom} from '@dcloudio/uni-app'
const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
const studioId = ref('')
onLoad((e) => {
	studioId.value = e.studioId
	getEvaluateListList()
})
//获取评论列表
const page = ref(1)
const evaluateList = ref<evaluateListType[]>([]) //评论列表
const evaluateListTotal = ref(0)
const getEvaluateListList = async () => {
	const res: any = await api({
		method: 'get',
		url: `/mall/order/assess/page`,
		data: {
			page: page.value,
			limit: 10,
			studioId: studioId.value
		}
	})
	if (res) {
		evaluateList.value = page.value==1?res.data.records:evaluateList.value.concat(res.data.records)
		evaluateListTotal.value = res.data.total
	}
}
onReachBottom(()=>{
	if(evaluateListTotal.value<=evaluateList.value.length) return
	page.value++
	getEvaluateListList()
})
//评论列表数据定义
interface evaluateListType {
	userAvatar: string
	nickName: string
	createTime: string
	content:number
	createTimeStr:string
	id: string
	ifAnonymous:number
}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 100%;
    padding: 32rpx;
	line-height: 1;
	box-sizing: border-box;
}
.evaluate {
	padding: 32rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 24rpx;
	.seeWhole {
		width: 276rpx;
		height: 84rpx;
		margin: auto;
		font-size: 28rpx;
		color: #ff6084;
		border-radius: 200rpx;
		border: 2rpx solid #ff6084;
		@include flex(center, center);
	}
	.evaluate_item {
		margin-bottom: 48rpx;
		.user {
			margin-bottom: 20rpx;
			@include flex(center, space-between);
			image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;
				vertical-align: middle;
				border-radius: 50%;
				border:2rpx solid #E4E6E6;
			}
			> view {
				width: calc(100% - 280rpx);
				@include flex(center);
			}
			text {
				color: #7c807f;
				font-size: 26rpx;
			}
			.name {
				width: calc(100% - 80rpx);
				color: #1b2120;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.item_content {
			width: calc(100% - 80rpx);
			margin-left: 80rpx;
			padding-bottom: 50rpx;
			font-size: 30rpx;
			color: #5c5e5e;
			line-height: 48rpx;
			word-break:break-all;
			word-wrap:break-word; 
			border-bottom: 2rpx solid #e4e6e6;
		}
	}
}
</style>
